<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-title">
        {{ $t("route.workspaceManage") }}
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            v-loading="loading"
            ref="table"
            :tableName="'workspaceTable'"
            :pageMethod="getWorkspaceData"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
              </div>
              <!-- 搜索 -->
              <div class="table-right-options">
                <el-select
                  style="margin-right: 10px"
                  filterable
                  default-first-option
                  size="medium"
                  :placeholder="$t('desktopManage.message.selectPool')"
                  :disabled="resource_pool_loading"
                  v-model="resource_pool"
                  @change="getAvailableAreaOptions"
                >
                  <template v-if="resource_pool_loading" #prefix>
                    <i class="el-input__icon el-icon-loading"></i>
                  </template>
                  <el-option
                    v-for="(item, index) in resource_pool_options"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select
                  style="margin-right: 10px"
                  filterable
                  default-first-option
                  size="medium"
                  :placeholder="$t('workspace.selectAvailableArea')"
                  :disabled="available_area_loading"
                  v-model="available_area"
                  @change="tableSlotData.table.refresh()"
                >
                  <template v-if="available_area_loading" #prefix>
                    <i class="el-input__icon el-icon-loading"></i>
                  </template>
                  <el-option
                    v-for="(item, index) in available_area_options"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <!--按租户筛选-->
                <!-- <el-select
                  style="margin-right: 10px"
                  filterable
                  default-first-option
                  size="medium"
                  :placeholder="$t('currentSessionManage.pleaseSelectATenant')"
                  v-model="resource_tenant"
                  @change="tableSlotData.table.refresh(true)"
                >
                  <template v-if="available_area_loading" #prefix>
                    <i class="el-input__icon el-icon-loading"></i>
                  </template>
                  <el-option
                    v-for="(item, index) in resource_tenant_options"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select> -->
                <el-input
                  :placeholder="$t('workspace.searchByWorkspaceOrTenant')"
                  @keyup.enter.native="tableSearchChange(tableSlotData)"
                  style="width:200px"
                  v-model="work_space_name"
                  :title="$t('workspace.searchByWorkspaceOrTenant')"
                >
                </el-input>
                <el-button
                  @click="tableSearchChange(tableSlotData)"
                  type="primary"
                  style="margin-left: 10px;"
                >
                  {{ $t('common.search') }}
                </el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <!-- <el-table-column type="selection" width="40" align="center"></el-table-column> -->
              <!-- 工作区名称 -->
              <el-table-column
                prop="name"
                :label="$t('workspace.name')"
              >
              <template #default="props">
                <div style="width:100%;display:flex;justify-content:left;align-items: center">
                  <link-button
                    style="max-width:80%"
                    :content="props.row.name"
                    :size="1"
                    :font-size="'12px'"
                    @click="initWorkspaceDetail(props.row)"
                  />
                </div>
              </template>
              </el-table-column>
              <!-- 工作区类型 -->
              <el-table-column
                prop="project_type"
                :label="$t('workspace.type')"
                >
              </el-table-column>
              <!-- 资源池 -->
              <el-table-column
                prop="resource_pool_name"
                :label="$t('common.resourcePool')"
                >
              </el-table-column>
              <!-- 可用区 -->
              <el-table-column
                prop="available_zone_code"
                :label="$t('workspace.availabilityZone')"
              >
              </el-table-column>
              <!-- 所属租户 -->
              <el-table-column
                prop="owner_tenant_name"
                :label="$t('common.belongTenant')"
                >
              </el-table-column>
              <!-- 桌面数量 -->
              <el-table-column
                prop="desktop_count"
                :label="$t('workspace.number')"
                >
              </el-table-column>
              <!-- 带宽大小 -->
              <el-table-column
                prop="shared_bandwidth"
                :label="$t('workspace.bandwidthSize')"
                >
                <template #default="props">
                  <span v-if="props.row.composite_specification != 1">{{ typeof props.row.shared_bandwidth === "number" ? props.row.shared_bandwidth : 0 }}M</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <!-- 描述 -->
              <el-table-column
                prop="description"
                :label="$t('common.description')"
                >
              </el-table-column>
              <!-- 创建时间 -->
              <el-table-column
                prop="created_at"
                :label="$t('workspace.creationTime')"
                >
                <template #default="props">
                  <span>{{ myParseTime(new Date(props.row.created_at)) }}</span>
                </template>
              </el-table-column>
              <!-- 操作 -->
              <el-table-column :label="$t('common.action')" width="150">
                <template #default="props">
                  <!-- <link-button
                    :content="$t('workspace.sharingTenants')"
                    :size="10"
                    :font-size="'12px'"
                    style="margin-right:15px"
                    @click="initSharingTenants(props.row)"
                  /> -->
                  <link-button
                    :content="$t('common.edit')"
                    :size="10"
                    :font-size="'12px'"
                    style="margin-right:15px"
                    @click="initEditWorkspace(props.row)"
                  />
                  <el-dropdown @command="handleCommand">
                  <el-button type="text" class="el-dropdown-link">
                      {{ $t('common.More')}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                     <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item 
                     :disabled="props.row.project_type!=='HorizonDaaS'"
                     :command="{action:'SettingsWorkspac',uuid:props.row.uuid,code:props.row.resource_pool_code,name:props.row.owner_tenant_name}">
                     {{$t('workspace.SettingsWorkspac')}}
                     </el-dropdown-item>
                     <el-dropdown-item 
                     :disabled="props.row.project_type!=='HorizonDaaS'||JSON.parse(props.row.shared_tenants).length===0"
                     :command="{action:'CancelWorkspac',uuid:props.row.uuid,owneruuid:props.row.owner_tenant_uuid,name:props.row.owner_tenant_name}">
                     {{$t('workspace.CancelWorkspac')}}</el-dropdown-item>
                    </el-dropdown-menu>
                 </el-dropdown>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <!-- 工作区详情 -->
              <workspace-detail ref="workspaceDialog"></workspace-detail>
              <sharing-tenants ref="sharingtenantsDialog"></sharing-tenants>
              <edit-work-space ref="editworkspaceDialog" @success="tableSlotData.table.refresh"></edit-work-space>
              <WorkspacDialog ref="SettingsWorkspacDialog" @updata="updata"></WorkspacDialog>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../components/Basic/Table/BasicTable.vue';
import LinkButton from '../../components/Basic/Button/LinkButton.vue';
import WorkspaceDetail from './components/workspace_detail.vue';
import SharingTenants from './components/sharing_tenants.vue';
import EditWorkSpace from './components/edit_workspace.vue';
import WorkspacDialog from './components/WorkspacDialog.vue';
import { parseTime } from '../../utils';
import { title } from 'process';
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    WorkspaceDetail,
    SharingTenants,
    EditWorkSpace,
    WorkspacDialog
  },
  data() {
    return {
      loading: false,
      resource_pool_loading: false,
      resource_pool: "all",
      resource_pool_options: [],
      available_area: "",
      available_area_options: [],
      available_area_loading: false,
      resource_tenant: "all",
      resource_tenant_options: [],
      resource_tenant_loading: false,
      work_space_name: "",
      tableSearch: false,
      workspaceDetailData: {},
      userAuthRule: process.env.VUE_APP_AUTH_RULE === 'tenant_admin' ? "tenant" : "system",
    };
  },
  created() {
    this.getResourcePoolOptions({})
    // this.getResourceTenantOptions({})
    this.getAvailableAreaOptions({})
  },
  methods: {
    //工作区详情
    initWorkspaceDetail(row: any) {
      (this as any).$refs['workspaceDialog'].init(row)
    },
    //分享租户
    // initSharingTenants(row: any) {
    //   (this as any).$refs['sharingtenantsDialog'].init(row)
    // },
    initEditWorkspace(row: any) {
      (this as any).$refs['editworkspaceDialog'].init(row)
    },
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    // 获取资源池
    getResourcePoolOptions(params: any) {
      this.resource_pool_options = [];
      this.resource_pool_loading = true;
      (this as any).$pandaApi.apiGetResourceList(params).then((res: any) => {
        this.resource_pool_options = res;
      }).finally(() => {
        (this.resource_pool_options as any).unshift({ id: "all", name: this.$t('desktopManage.allResourcePool') as any});
        this.resource_pool_loading = false;
      });
    },
    // 获取可用区
    getAvailableAreaOptions(params: any) {
      const unshiftAllAvailableArea = () => {
        (this.available_area_options as any).unshift({ id: "all", name: this.$t('workspace.allAvailableArea') as any});
        (this as any).$refs?.table?.refresh();
      }
      this.available_area_options = [];
      this.available_area = "all";
      if(!this.resource_pool || this.resource_pool === "all") {
        unshiftAllAvailableArea();
        return;
      }
      const selectPool: any = this.resource_pool_options.find((pool: any) => pool.id === this.resource_pool);
      this.available_area_loading = true;
      (this as any).$pandaApi.apiGetAvailabilityZone({pool_code: selectPool.pool_code}).then((res: any) => {
        const resultArr: any = [];
        for(var i in res) {
          let obj = {
            name: res[i],
            id: res[i]
          }
          resultArr.push(obj);
        }
        this.available_area_options = resultArr;
      }).finally(() => {
        unshiftAllAvailableArea();
        this.available_area_loading = false;
      })
    },
    // 共享工作区的弹窗控制
    handleCommand(rem:any){
      if(rem.action==='SettingsWorkspac'){
        (this as any).$refs.SettingsWorkspacDialog.init('SettingsWorkspac',rem);
      }
      if(rem.action==="CancelWorkspac"){
         (this as any).$refs.SettingsWorkspacDialog.init('CancelWorkspac',rem);
      }
    },
    updata(){
   (this as any).$refs.table.getPage()
   
    },
    //获取资源租户
    // getResourceTenantOptions(params: any) {
    //   // 向选择框开头添加全部选项
    //   const unshiftAllItem = () => {
    //     (this.resource_tenant_options as any).unshift({ id: "all", name: this.$t('common.allCloudTenant') as any});
    //   }
    //   // 清空资源池租户选项
    //   this.resource_tenant_options = [];
    //   this.resource_tenant = "";
    //   // 判断有没有选资源池
    //   if (!this.resource_pool || this.resource_pool === "all") {
    //     unshiftAllItem()
    //     return;
    //   }
      
    //   // 调用接口获取资源池租户选项数据
    //   this.resource_tenant_loading = true;
    //   (this as any).$pandaApi.apiGetResourceTenantsList(this.resource_pool, params).then((res: any) => {
    //     this.resource_tenant_options = res;
    //   }).finally(() => {
    //     unshiftAllItem()
    //     this.resource_tenant_loading = false;
    //   })
    // },
    getWorkspaceData(params: any) {
      if (this.resource_pool && this.resource_pool != 'all') {
        params.resource_pool_code = (this as any).resource_pool_options.find((item: any) => item.id === this.resource_pool).pool_code;
      }
      if(this.available_area && this.available_area != 'all') {
        params.available_zone_code = (this as any).available_area_options.find((item: any) => item.id === this.available_area).id;
      }
      if (this.work_space_name) {
        params.search = this.work_space_name;
      } else {
        delete params.search;
      }
      return this.$pandaApi.apiGetWorkSpace(this.userAuthRule, params);
    },
    myParseTime(t: any) {
      return parseTime(t);
    },
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-title {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}

.delete-warning-icon {
  color: #FF931D;
  font-size: 20px;
  margin-right: 10px;

  &::before {
    font-size: 20px;
  }
}
</style>